<?php
// 数据存储
$data_file = 'hall_data.json';

// 初始名人数据
$celebrities = [
    ['id'=>'1', 'name'=>'爱因斯坦', 'intro'=>'物理学家，相对论创立者', 'incense'=>15],
    ['id'=>'2', 'name'=>'居里夫人', 'intro'=>'放射性研究先驱', 'incense'=>12],
    ['id'=>'3', 'name'=>'达芬奇', 'intro'=>'文艺复兴大师', 'incense'=>8],
    ['id'=>'4', 'name'=>'特斯拉', 'intro'=>'交流电之父', 'incense'=>7],
    ['id'=>'5', 'name'=>'伽利略', 'intro'=>'天文学先驱', 'incense'=>5],
    ['id'=>'6', 'name'=>'牛顿', 'intro'=>'经典力学奠基人', 'incense'=>9]
];

// 加载数据
if (file_exists($data_file)) {
    $saved = json_decode(file_get_contents($data_file), true);
    if ($saved) $celebrities = $saved;
} else {
    file_put_contents($data_file, json_encode($celebrities));
}

// 处理上香请求
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['incense_id'])) {
    $id = $_POST['incense_id'];
    foreach ($celebrities as &$p) {
        if ($p['id'] === $id) {
            $p['incense']++;
            break;
        }
    }
    file_put_contents($data_file, json_encode($celebrities));
    header('Content-Type: application/json');
    echo json_encode(['incense' => $p['incense']]);
    exit;
}
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>名人堂</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            background: linear-gradient(135deg, #f0f9ff 0%, #e6f7f7 100%);
            min-height: 100vh;
            padding: 20px;
            display: flex;
            flex-direction: column;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        /* 墓碑网格 */
        .tomb-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            gap: 25px;
            max-width: 1000px;
            margin: 0 auto;
            width: 100%;
            padding: 20px;
        }
        
        .tombstone {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            transition: transform 0.3s;
        }
        
        .tombstone:hover {
            transform: translateY(-8px);
        }
        
        .tomb-icon {
            width: 80px;
            height: 80px;
            background: #20b2aa;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 12px;
            box-shadow: 0 4px 10px rgba(32, 178, 170, 0.25);
        }
        
        .tomb-name {
            color: #20b2aa;
            font-size: 1rem;
            font-weight: 500;
            text-align: center;
        }
        
        /* 详情弹窗 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s;
        }
        
        .modal-overlay.active {
            opacity: 1;
            pointer-events: all;
        }
        
        .modal-content {
            background: white;
            border-radius: 16px;
            width: 90%;
            max-width: 500px;
            padding: 30px;
            text-align: center;
            transform: scale(0.9);
            opacity: 0;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
        }
        
        .modal-overlay.active .modal-content {
            transform: scale(1);
            opacity: 1;
        }
        
        .modal-icon {
            font-size: 4rem;
            color: #20b2aa;
            margin-bottom: 20px;
        }
        
        .modal-name {
            font-size: 1.8rem;
            color: #333;
            margin-bottom: 20px;
            font-weight: 600;
        }
        
        .modal-desc {
            font-size: 1.1rem;
            color: #555;
            line-height: 1.6;
            margin-bottom: 25px;
        }
        
        .incense-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 15px;
        }
        
        .incense-btn {
            background: #20b2aa;
            color: white;
            border: none;
            padding: 12px 30px;
            font-size: 1rem;
            border-radius: 50px;
            cursor: pointer;
            margin: 10px 0;
            width: 140px;
            transition: all 0.3s;
        }
        
        .incense-btn:hover {
            background: #1a9a94;
            transform: scale(1.05);
        }
        
        .incense-count {
            font-size: 1.2rem;
            color: #20b2aa;
            font-weight: 500;
        }
        
        .close-btn {
            position: absolute;
            top: 15px;
            right: 15px;
            background: none;
            border: none;
            color: #888;
            font-size: 1.8rem;
            cursor: pointer;
        }
        
        /* 墓碑图标 */
        .tomb-icon svg {
            width: 50px;
            height: 50px;
            fill: white;
        }
        
        .modal-icon svg {
            width: 80px;
            height: 80px;
            fill: #20b2aa;
        }
        
        /* 响应式 */
        @media (max-width: 600px) {
            .tomb-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 15px;
            }
            
            .tomb-icon {
                width: 70px;
                height: 70px;
            }
        }
        
        @media (max-width: 400px) {
            .tomb-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    </style>
</head>
<body>
    <!-- 墓碑网格 -->
    <div class="tomb-grid">
        <?php foreach ($celebrities as $person): ?>
        <div class="tombstone" data-id="<?= $person['id'] ?>" 
             data-name="<?= $person['name'] ?>"
             data-desc="<?= $person['intro'] ?>"
             data-incense="<?= $person['incense'] ?>">
            <div class="tomb-icon">
                <svg viewBox="0 0 24 24">
                    <path d="M18 22H6v-6H4v-6c0-1.1.9-2 2-2h12c1.1 0 2 .9 2 2v6h-2v6zm-10 0v-6h8v6h-8zM4 6h16v2H4z"/>
                </svg>
            </div>
            <div class="tomb-name"><?= $person['name'] ?></div>
        </div>
        <?php endforeach; ?>
    </div>
    
    <!-- 详情弹窗 -->
    <div class="modal-overlay" id="detail-modal">
        <div class="modal-content">
            <button class="close-btn">&times;</button>
            <div class="modal-icon">
                <svg viewBox="0 0 24 24">
                    <path d="M18 22H6v-6H4v-6c0-1.1.9-2 2-2h12c1.1 0 2 .9 2 2v6h-2v6zm-10 0v-6h8v6h-8zM4 6h16v2H4z"/>
                </svg>
            </div>
            <div class="modal-name" id="modal-name"></div>
            <div class="modal-desc" id="modal-desc"></div>
            <div class="incense-container">
                <button class="incense-btn" id="incense-btn">献上香火</button>
                <div class="incense-count">已上香: <span id="incense-count">0</span> 次</div>
            </div>
        </div>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const detailModal = document.getElementById('detail-modal');
            
            // 墓碑点击事件
            document.querySelectorAll('.tombstone').forEach(tomb => {
                tomb.addEventListener('click', function() {
                    const id = this.dataset.id;
                    const name = this.dataset.name;
                    const desc = this.dataset.desc;
                    const incense = this.dataset.incense;
                    
                    document.getElementById('modal-name').textContent = name;
                    document.getElementById('modal-desc').textContent = desc;
                    document.getElementById('incense-count').textContent = incense;
                    document.getElementById('incense-btn').dataset.id = id;
                    
                    detailModal.classList.add('active');
                });
            });
            
            // 上香按钮事件
            document.getElementById('incense-btn').addEventListener('click', function() {
                const id = this.dataset.id;
                const incenseCount = document.getElementById('incense-count');
                
                // 发送上香请求
                fetch('', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    body: 'incense_id=' + encodeURIComponent(id)
                })
                .then(response => response.json())
                .then(data => {
                    incenseCount.textContent = data.incense;
                    
                    // 更新墓碑上的计数
                    document.querySelectorAll('.tombstone').forEach(tomb => {
                        if (tomb.dataset.id === id) {
                            tomb.dataset.incense = data.incense;
                        }
                    });
                    
                    // 视觉反馈
                    this.textContent = '✓ 已上香';
                    this.style.background = '#4CAF50';
                    setTimeout(() => {
                        this.textContent = '献上香火';
                        this.style.background = '';
                    }, 1500);
                })
                .catch(error => {
                    console.error('Error:', error);
                });
            });
            
            // 关闭弹窗
            document.querySelector('.close-btn').addEventListener('click', function() {
                detailModal.classList.remove('active');
            });
            
            // 外部点击关闭
            detailModal.addEventListener('click', function(e) {
                if (e.target === this) {
                    this.classList.remove('active');
                }
            });
        });
    </script>
</body>
</html>